<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
  style: {
    navigationStyle: 'custom',
  },
}
</route>

<script setup>
import IconLtfm from '@/static/icons/home-tab-ltfm.png'
// import IconGxcd from '@/static/icons/home-tab-gxcd.png'
// import IconDzcd from '@/static/icons/home-tab-dzcd.png'
import IconSjkt from '@/static/icons/home-tab-sjkt.png'
import IconWhcd from '@/static/icons/home-tab-whcd.png'
import IconRck from '@/static/icons/home-tab-rck.png'

import LoginApi from '@/service/login'
import ActivityApi from '@/service/activity'
import ArticleApi from '@/service/article'
import { judgeShowImage, returnFullUrl, uniNavigateTo } from '@/utils/index'
import { useUserStore } from '@/store'
import { useMessage } from 'wot-design-uni'
import TabBar from '@/components/TabBar.vue'
import defaultAvatar from '@/static/logo.png'
import CommonActivityItem from '@/components/CommonActivityItem.vue'
import { usePermissionStore } from '@/store/permission'

const { clearUserPermission, setMenuList, setActionList } = usePermissionStore()

const userStore = useUserStore()

const _userInfo = computed(() => userStore.userInfo)
const _isLogined = computed(() => userStore.isLogined)
const userAvatar = computed(() => _userInfo.value.avatar || defaultAvatar)

const message = useMessage()

const getPermission = async () => {
  const { code, result } = await LoginApi.getUserPermission()
  if (code === 0 && result) {
    setMenuList(result.menu)
    setActionList(result.codeList)
  }
}

onLoad(() => {
  console.log('App Launch')
  if (!_isLogined.value) {
    userStore.clearUserInfo()
    clearUserPermission()
  } else {
    getPermission()
  }
})

const current = ref(0)

const swiperList = ref([])
const getBannerList = async () => {
  const params = { location: 'nativeHomepage' }
  const { code, result } = await ActivityApi.getBannerList(params)
  if (code === 200 && result.length) {
    swiperList.value = result.map((item) => ({
      url: returnFullUrl(item.mediaUrl),
      // url: IconLtfm,
      ...item,
    }))
  }
}
getBannerList()

const clickSwiper = ({ item }) => {
  if (item.href) {
    const url = encodeURIComponent(item.href)
    uniNavigateTo(`/pages-sub/web/index?url=${url}`)
  }
}

const pageObj = ref({
  pageNo: 1,
  pageSize: 4,
})
const listState = reactive({
  newsList: [],
  adminStyleList: [],
  activityList: [],
  artistList: [],
})

const getNewsPage = async () => {
  const params = {
    ...pageObj.value,
    category: 'news',
    column: 'createTime',
    order: 'desc',
  }
  const { code, result } = await ArticleApi.getArticlePage(params)
  if (code === 200 && result) {
    listState.newsList = result.records
  } else {
    listState.newsList = []
  }
}
getNewsPage()

const getAdminPage = async () => {
  const params = {
    ...pageObj.value,
    category: 'adminStyle',
    column: 'createTime',
    order: 'desc',
  }
  const { code, result } = await ArticleApi.getArticlePage(params)
  if (code === 200 && result) {
    listState.adminStyleList = result.records
  } else {
    listState.adminStyleList = []
  }
}
getAdminPage()

const getArtistPage = async () => {
  const params = {
    ...pageObj.value,
    category: 'wyqbzy',
    column: 'createTime',
    order: 'desc',
  }
  const { code, result } = await ArticleApi.getArticlePage(params)
  if (code === 200 && result) {
    listState.artistList = result.records
  } else {
    listState.artistList = []
  }
}
getArtistPage()

const getActivityPage = async () => {
  const params = {
    ...pageObj.value,
    column: 'date',
    order: 'desc',
    status: 'complete', // 只需要看已经完成的
  }
  const { code, result } = await ActivityApi.getActivityList(params)
  if (code === 200 && result) {
    listState.activityList = result.records
  } else {
    listState.activityList = []
  }
}
getActivityPage()

const goOrder = () => {
  if (_isLogined.value) {
    uniNavigateTo('/pages-sub/order-serve/index')
  } else {
    message
      .confirm({
        msg: '您还未登录，是否去登录？',
        title: '提示',
      })
      .then(() => {
        uniNavigateTo('/pages/login/index')
      })
      .catch(() => {
        console.log('点击了取消按钮')
      })
  }
}

/** ********** 正在直播的数据 start **********/
// const firstLive = ref(null)
// const getFirstLive = async () => {
//   const { code, result } = await LiveApi.getLiveInfoList({
//     pageNo: 1,
//     pageSize: 10,
//     status: 'LIVE',
//   })
//   if (code === 200 && result) {
//     console.log('result', result)
//     const { records } = result
//     if (records.length > 0) {
//       firstLive.value = records[0]
//     }
//     console.log('firstLive', firstLive)
//   }
// }
// getFirstLive()
/** ********** 正在直播的数据 end **********/

// const activityListRef = shallowRef(null)
// const getData = () => {
//   activityListRef.value.getDataList()
// }

const menuList = [
  {
    label: '礼堂风貌',
    iconSrc: IconLtfm,
    path: '/pages-sub/auditorium/scene/index',
  },
  // {
  //   label: '文化共享菜单',
  //   iconSrc: IconGxcd,
  //   path: '/pages-sub/share-menu/index',
  // },
  // {
  //   label: '文化定制菜单',
  //   iconSrc: IconDzcd,
  //   path: '/pages-sub/custom-menu/index',
  // },
  {
    label: '文化菜单',
    iconSrc: IconWhcd,
    path: '/pages-sub/culture-menu/index',
  },
  {
    label: '文化运维库',
    iconSrc: IconRck,
    path: '/pages-sub/talent-pool/index',
  },
  {
    label: '实践云课堂',
    iconSrc: IconSjkt,
    path: '/pages-sub/practice-class/index',
  },
]
const goMenu = (item) => {
  if (item.path) {
    uniNavigateTo(item.path)
  }
}

const tabList = [
  { label: '精彩资讯', value: '0' },
  { label: '礼堂活动', value: '1' },
  { label: '管理员风采', value: '2' },
  { label: '文艺轻骑兵', value: '3' },
]
const activeTab = ref(tabList[0].value)

const checkTab = (item) => {
  activeTab.value = item.value
  if (item.value === '0') {
    getNewsPage()
  } else if (item.value === '1') {
    getActivityPage()
  } else if (item.value === '2') {
    getAdminPage()
  } else if (item.value === '3') {
    getArtistPage()
  }
}

const emitTabbarClick = () => {
  uni.$emit('tabbarClick')
}
</script>

<template>
  <view class="home">
    <view @click="emitTabbarClick">
      <view class="swiper-container">
        <wd-swiper
          height="600rpx"
          custom-indicator-class="custom-indicator-class"
          :list="swiperList"
          value-key="url"
          autoplay
          v-model:current="current"
          :indicator="{ type: 'dots-bar' }"
          @click="clickSwiper"
        ></wd-swiper>
      </view>
      <view class="home-container">
        <view class="menu-box">
          <view
            class="menu-item"
            v-for="(item, index) in menuList"
            :key="index"
            @click="goMenu(item)"
          >
            <image
              class="w-80rpx h-80rpx mb-24rpx"
              :src="item.iconSrc"
            />
            <view>{{ item.label }}</view>
          </view>
        </view>
        <view class="notice-box">
          <image
            class="w-64rpx h-64rpx rounded-full"
            :src="userAvatar"
          />
          <view class="notice-divider"></view>
          <template>
            <view
              v-if="_isLogined"
              class="notice-text"
            >
              {{ _userInfo.realname }}，欢迎来到临海农村文化礼堂
            </view>
            <view
              v-else
              class="notice-text"
              @click="uniNavigateTo('/pages/login/index')"
            >
              您好，请登录
            </view>
          </template>
        </view>
        <view class="list-box">
          <view class="list-header">
            <image
              class="list-bg"
              src="@/static/images/list-top.png"
            />
            <view
              v-for="(item, index) in tabList"
              :key="index"
              class="list-header-item"
              :class="{ active: activeTab === item.value }"
              @click="checkTab(item)"
            >
              <image
                v-if="activeTab === item.value"
                class="checked"
                src="@/static/images/list-tab-checked.png"
              ></image>
              <text class="pos-relative">
                {{ item.label }}
              </text>
            </view>
          </view>
          <view class="list-container">
            <image
              class="list-bg"
              src="@/static/images/list-center.png"
            />
            <view
              v-if="activeTab === '0'"
              class="list-container-content pos-relative"
            >
              <template v-if="listState.newsList.length > 0">
                <CommonActivityItem
                  v-for="item in listState.newsList.slice(0, 3)"
                  :key="item.id"
                  :img-src="item.coverUrl"
                  :title="item.title"
                  :desc-list="[
                    { label: '观看次数', value: item.readCount },
                    {
                      label: '发布时间',
                      value: item.publishDate?.substring(0, 10),
                    },
                  ]"
                  need-border
                  @custom-click="
                    uniNavigateTo(
                      `/pages-sub/article/detail/index?id=${item.id}&title=精彩资讯`,
                    )
                  "
                />
                <view
                  v-if="listState.newsList.length > 3"
                  class="show-more"
                  @click="
                    uniNavigateTo(
                      '/pages-sub/article/index?type=news&title=精彩资讯',
                    )
                  "
                >
                  <text>查看更多</text>
                  <wd-icon
                    name="chevron-right"
                    size="32rpx"
                  ></wd-icon>
                </view>
              </template>
              <wd-status-tip
                v-else
                image="content"
                tip="暂无内容"
              />
            </view>
            <view
              v-if="activeTab === '1'"
              class="list-container-content pos-relative"
            >
              <template v-if="listState.activityList.length > 0">
                <CommonActivityItem
                  v-for="item in listState.activityList.slice(0, 3)"
                  :key="item.id"
                  :info="item"
                  show-badge
                  :img-src="judgeShowImage(item.coverUrl, item.liveUrl)"
                  :title="item.name"
                  :desc-list="[
                    { label: '活动时间', value: item.date },
                    { label: '活动礼堂', value: item.hallId_dictText },
                  ]"
                  need-border
                  @custom-click="
                    uniNavigateTo(
                      `/pages-sub/activity/detail/index?id=${item.id}`,
                    )
                  "
                />
                <view
                  v-if="listState.activityList.length > 3"
                  class="show-more"
                  @click="uniNavigateTo('/pages-sub/activity/list/index')"
                >
                  <text>查看更多</text>
                  <wd-icon
                    name="chevron-right"
                    size="32rpx"
                  ></wd-icon>
                </view>
              </template>
              <wd-status-tip
                v-else
                image="content"
                tip="暂无内容"
              />
            </view>
            <view
              v-if="activeTab === '2'"
              class="list-container-content pos-relative"
            >
              <template v-if="listState.adminStyleList.length > 0">
                <CommonActivityItem
                  v-for="item in listState.adminStyleList.slice(0, 3)"
                  :key="item.id"
                  :img-src="item.coverUrl"
                  :title="item.title"
                  :desc-list="[
                    { label: '观看次数', value: item.readCount },
                    {
                      label: '发布时间',
                      value: item.publishDate?.substring(0, 10),
                    },
                  ]"
                  need-border
                  @custom-click="
                    uniNavigateTo(
                      `/pages-sub/article/detail/index?id=${item.id}&title=管理员风采`,
                    )
                  "
                />
                <view
                  v-if="listState.adminStyleList.length > 3"
                  class="show-more"
                  @click="
                    uniNavigateTo(
                      '/pages-sub/article/index?type=adminStyle&title=管理员风采',
                    )
                  "
                >
                  <text>查看更多</text>
                  <wd-icon
                    name="chevron-right"
                    size="32rpx"
                  ></wd-icon>
                </view>
              </template>
              <wd-status-tip
                v-else
                image="content"
                tip="暂无内容"
              />
            </view>
            <view
              v-if="activeTab === '3'"
              class="list-container-content pos-relative"
            >
              <template v-if="listState.artistList.length > 0">
                <CommonActivityItem
                  v-for="item in listState.artistList.slice(0, 3)"
                  :key="item.id"
                  :img-src="item.coverUrl"
                  :title="item.title"
                  :desc-list="[
                    { label: '观看次数', value: item.readCount },
                    {
                      label: '发布时间',
                      value: item.publishDate?.substring(0, 10),
                    },
                  ]"
                  need-border
                  @custom-click="
                    uniNavigateTo(
                      `/pages-sub/article/detail/index?id=${item.id}&title=文艺轻骑兵`,
                    )
                  "
                />
                <view
                  v-if="listState.artistList.length > 3"
                  class="show-more"
                  @click="
                    uniNavigateTo(
                      '/pages-sub/article/index?type=wyqbzy&title=文艺轻骑兵',
                    )
                  "
                >
                  <text>查看更多</text>
                  <wd-icon
                    name="chevron-right"
                    size="32rpx"
                  ></wd-icon>
                </view>
              </template>
              <wd-status-tip
                v-else
                image="content"
                tip="暂无内容"
              />
            </view>
          </view>
          <view class="list-footer">
            <image
              class="list-bg"
              src="@/static/images/list-bottom.png"
            />
          </view>
        </view>
      </view>
    </view>
    <wd-message-box />
    <TabBar />
  </view>
</template>

<style lang="scss" scoped>
.swiper-container {
  z-index: 0;
  background: #fff;
  border-radius: 0 0 32rpx 32rpx;
  overflow: hidden;

  // margin-bottom: $uni-spacing-col-lg;
  /* stylelint-disable-next-line selector-class-pattern */
  :deep(.wd-swiper__track) {
    border-radius: 0;
  }

  :deep(.custom-indicator-class) {
    bottom: 120rpx;
  }
}

.home {
  min-height: 100vh;
  padding-bottom: 160rpx;
  overflow-y: auto;
  background: #d8efff;

  &-container {
    position: relative;
    padding: 24rpx;
    margin-top: -120rpx;
    z-index: 0;
  }
}

.menu-box {
  position: relative;
  display: flex;
  height: 230rpx;
  margin-bottom: 24rpx;
  background-image: linear-gradient(
    180deg,
    rgb(255 255 255 / 68%) 0%,
    #fff 100%
  );
  border: 2rpx solid rgb(255 255 255 / 100%);
  border-radius: 16rpx;
  backdrop-filter: blur(8rpx);

  // &::before {
  //   content: '';
  //   position: absolute;
  //   top: 0;
  //   left: 0;
  //   z-index: 0;
  //   width: 100%;
  //   height: 100%;
  //   background: #fff;
  //   border-radius: 16rpx;
  //   opacity: 0.6;
  //   backdrop-filter: blur(4rpx);
  //   z-index: -1;
  // }

  .menu-item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: $uni-text-color;
  }
}

.notice-box {
  display: flex;
  align-items: center;
  height: 112rpx;
  padding: 0 32rpx;
  margin-bottom: 32rpx;
  background: #fff;
  border-radius: 16rpx;

  .notice-divider {
    width: 2rpx;
    height: 48rpx;
    margin: 0 24rpx;
    background: $uni-border-color;
  }

  .notice-text {
    font-size: 28rpx;
    font-weight: 500;
    color: $uni-text-color-emphasis;
  }
}

.list-box {
  .list-bg {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
  }

  .list-header {
    position: relative;
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: 144rpx;
    padding: 28rpx 80rpx 0;

    &-item {
      position: relative;
      display: flex;
      flex: 1;
      align-items: center;
      justify-content: center;
      height: 64rpx;
      font-size: 24rpx;
      color: #fff;

      &.active {
        font-size: 28rpx;
        font-weight: 500;
      }

      .checked {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
        width: 100%;
        height: 100%;
      }
    }
  }

  .list-container {
    position: relative;
    padding: 0 52rpx;
  }

  .list-footer {
    position: relative;
    width: 100%;
    height: 64rpx;
  }
}

.show-more {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
  font-size: 24rpx;
  color: $uni-color-primary;
}
</style>
